let form = layui.form;

// 1,需求进入页面先发送ajax请求获取信息

function loadLinksInfo() {
  $.ajax({
    type: "get",
    url: "/admin/links",
    success: function (res) {
      let str = "";
      res.data.forEach((item) => {
        str += `<tr>
         <td>${item.id}</td>
         <td>
           <div class="bg">
             <img src="http://localhost:8888/uploads/${item.linkicon}">
           </div>
         </td>
         <td>${item.linkname}</td>
         <td>${item.linkurl}</td>
         <td>${item.linkdesc}</td>
         <td>
           <button data-id="${item.id}" type="button" class=" edit layui-btn layui-btn-xs edit">
             编辑
           </button>
           <button data-id="${item.id}" type="button" class=" del layui-btn layui-btn-xs layui-btn-danger delete">
             删除
           </button>
         </td>
       </tr>
         `;
      });
      $(".layui-table tbody").html(str);
    },
  });
}

loadLinksInfo();

//1,  点击添加按钮 出现弹出层

$("#add-link").click(function () {
  //出现layui中的弹出层
  var index = layer.open({
    type: 1,
    title: "添加友情链接",
    content: $("#add-form-tpl").html(),
    area: ["500px", "350px"],
  });
  //绑定文件上传按钮 触发文件linkFile的点击事件
  $("#urlIcon").click(function () {
    $("#linkFile").click();
  });

  //监听文件选中事件 change事件
  $("#linkFile").change(function (e) {
    // 把图片弄成图片地址  文件上传file是个 数组
    const objectURL = URL.createObjectURL(e.target.files[0]);
    // 把图片地址给我们预览图片的地址
    $("#preIcon").attr("src", objectURL);
  });
  //绑定添加链接的提交事件
  $("#add-form").submit(function (e) {
    //阻止事件的提交的事件
    e.preventDefault();
    //获取用户的数据
    let fd = new FormData(this);

    //发送ajax请求
    $.ajax({
      type: "post",
      url: "/admin/links",
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          //关闭弹层
          layer.close(index);
          //渲染页面 刷新列表
          loadLinksInfo();
        }
      },
    });
  });
});

//  ---------------删除友情连接诶--------------
// 绑定删除事件   事件委托
$(".layui-table tbody").on("click", ".del", function (e) {
  let id = $(e.target).data("id");
  // 点击删除的时候询问一下要删除么

  layer.confirm("确定要删除么", function (index) {
    // 这个函数是点击删除确定后删除后触发a
    //  确定后发送ajax请求
    $.ajax({
      type: "DELETE",
      url: "/admin/links/" + id,
      success: function (res) {
        if (res.status === 0) {
          //如果请求成功  关闭弹出层的询问
          layer.close(index);
          // 渲染页面
          loadLinksInfo();
        }
      },
    });
  });
});

// --------------------------编辑友情链接 ------------------------
// 因为点击编辑涉及数据回填,数据回填的内容是我们动态添加的,所以要事件委托
$(".layui-table tbody").on("click", ".edit", function (e) {
  // 获取最定义属性的id  因为id可以让我们确定我们编辑的是哪一个
  //获取自定义属性id
  console.log(11111);
  let id = $(e.target).data("id");

  // 发送ajax请求  请求成功 出现弹出层 数据回填 获取链接数据
  $.ajax({
    type: "get",
    url: "/admin/links/" + id,
    success: function (res) {
      var index = layer.open({
        type: 1,
        title: "编辑友情链接",
        content: $("#edit-form-tpl").html(),
        area: ["500px", "350px"],
      });

      //设置图片预览效果
      $("#preIcon").attr(
        "src",
        "http://localhost:8888/uploads/" + res.data.linkicon
      );
      //  初始化表单数据
      delete res.data.linkicon;
      // 数据回填的内容是我们动态添加的
      form.val("editForm", res.data);

      //绑定文件上传按钮 触发input里面的上传
      $("#urlIcon").click(function () {
        $("#linkFile").click;
      });

      // 监听文件选中事件
      let file = null;
      $("#linkFile").change(function (e) {
        file = e.target.files[0];
        //  把众多文件中的第一个的url解释出来
        const objectURL = URL.creatObjjectURL(e.target.files[0]);
        $("#preIcon").attr("src", objectURL);
      });

      //绑定表单提交事件
      $("#edit-form").submit(function (e) {
        //阻止浏览器的默认提交
        e.preventDefault();
        var fd = new FormData(this);
        if (file) {
          fd.append("linkicon", file);
        }
        // 发送ajax请求修改
        $.ajax({
          type: "put",
          url: "/admin/links/" + id,
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            if (res.status === 0) {
              //说明请求成功 关闭弹窗
              layer.close(index);
              //渲染页面
              loadLinksInfo();
            }
          },
        });
      });
    },
  });
});
